iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 3
0
自我挑戰組

sass&css 30天學習日誌系列 第 3

CSS: Checked原理應用--Tab Panel

  • 分享至 

  • xImage
  •  

Tab Panel面板是單一切換對應內容,所以用radio單選方式比較適合

html

<div class="panel-group">
  <div class="tab-group">
    <label for="radio1" class="active">tab1</label>
    <label for="radio2">tab2</label>
    <label for="radio3">tab3</label>
  </div>
  <div class="content-group">
    <div class="content content1">content1</div>
    <div class="content content2">content2</div>
    <div class="content content3">content3</div>
  </div>
</div>

css

.tab-group label {
  display:inline-block;
  padding: 10px 30px;
  border:1px solid #ccc;
  border-bottom:none;
  background-color: #ccc;
  bottom:-1px;
}
.content-group {
  border:1px solid #ccc;
  padding: 20px;
}
.tab-group .active {
  background-color: #fff;
  position:relative;
}

效果如下:

https://ithelp.ithome.com.tw/upload/images/20200411/20107321YvXHy0by5w.png

切換功能:

以下依照順序推論來逐步完成tab pannel功能:

1.內容顯示/隱藏

目前tab1是一次顯示所有content1~3,所以先把所有內容隱藏

.content {display:none;}

https://ithelp.ithome.com.tw/upload/images/20200411/20107321ZBgrMDTcY9.png

先設定只有第一個內容要出現,所以把content1打開

.content1 {display:block;}

https://ithelp.ithome.com.tw/upload/images/20200411/201073217IF4lj5uBP.png

2.radio控制tab

放置radio控制面板,因為要控制兩個元件(tab和content),所以radio與tab-group和content-group要同層

<div class="panel-group">
 <input type="radio" name="panel-radio" id="radio1" class="panel-control">
  <input type="radio" name="panel-radio" id="radio2" class="panel-control">
  <input type="radio" name="panel-radio" id="radio3" class="panel-control">
  <div class="tab-group">
  ...
  </div>
  <div class="content-group">
  ...
  </div>
</div>

效果如下:
點選tab可對應到radio選項,內容目前只顯示content1,所以沒變化
要注意 radio的name要有名稱,而且要一樣,這樣同時間這幾個radio button只有一個被勾選

https://ithelp.ithome.com.tw/upload/images/20200411/20107321Re6AE6PcqK.png

3.點到對應tab後tab變色

設定點到tab為active狀態,並且變白色背景

id=radio1被打勾後

 <input type="radio" name="panel-radio" id="radio1" class="panel-control">

要選到tab-group裡面的第一個label

<label for="radio1" class="active">tab1</label>

所以css如下:

#radio1:checked ~ .tab-group [for="radio1"]{}

原先的tab-group .active的css內容,就移到tab-group label和radio

/*.tab-group .active {
position:relative;
background-color: #fff;
}*/

01.tab-group label: 改相對定位

.tab-group label {
  position:relative;
}

02.radio:被選到的tab-group裡面對應的label則變白色

#radio1:checked ~ .tab-group [for="radio1"]{background-color: #fff;}
#radio2:checked ~ .tab-group [for="radio2"]{background-color: #fff;}
#radio3:checked ~ .tab-group [for="radio3"]{background-color: #fff;}

效果如下:

https://ithelp.ithome.com.tw/upload/images/20200411/20107321UdvosewGQl.png

4.點到tab並對應到內容

依照上面原理,content可以這樣寫

第一個被checked以後,content-group裡面的content1要做display:block

#radio1:checked ~ .content-group .content1 {display:block}

其他兩個也是同樣

#radio1:checked ~ .content-group .content1 {display:block}
#radio2:checked ~ .content-group .content2 {display:block}
#radio3:checked ~ .content-group .content3 {display:block}

效果如下:

https://ithelp.ithome.com.tw/upload/images/20200411/20107321S6PZXzUhM1.png

發現點到tab2或是tab3,裡面都有content1,所以要把content1關掉
因此要做的事情是:
radio1以外被checked以後,要把content1關掉

#radio2:checked~ .content-group .content1{display:none}
#radio3:checked~ .content-group .content1{display:none}

效果如下:

https://ithelp.ithome.com.tw/upload/images/20200411/20107321r8xCWTPuPi.png

在此已經可以把第一個input設定為checked狀態
html

  <input type="radio" name="panel-radio" id="radio1" class="panel-control" checked>

https://ithelp.ithome.com.tw/upload/images/20200411/20107321hEIqYtd4fC.png

因為已經預設content1為checked狀態,所以完全不需要把他藏起來,因此原先設定的content1的display可刪除

/* #radio2:checked~ .content-group .content1{display:none}
#radio3:checked~ .content-group .content1{display:none} */

另外因為上方content1是打開,所以也要刪除

/* .content1 {display:block;} */

radio部分太冗長,可以簡化縮寫

#radio1:checked ~ .tab-group [for="radio1"],
#radio2:checked ~ .tab-group [for="radio2"],
#radio3:checked ~ .tab-group [for="radio3"]{background-color: #fff;}

#radio1:checked ~ .content-group .content1,
#radio2:checked ~ .content-group .content2,
#radio3:checked ~ .content-group .content3 {display:block}

效果還是不變,如上圖,現在就是要讓radio消失
input radio的class為panel-control,所以使用絕對定位,不設定方向就可以了
另外間距如果沒處理好可能還是會出現所以不透明度設定為0

.panel-control {
  position:absolute;
  opacity:0;
}

效果如下:

https://ithelp.ithome.com.tw/upload/images/20200411/20107321MvmzATJOGo.png

codepen: https://codepen.io/yuski/pen/rqMmQj
文章取材來源: 阿莫斯の網頁料理室 : CSS checked 選取器的應用


上一篇
CSS: Checked原理應用--Toggle Switch開關
下一篇
CSS: 偽元素應用- input icon
系列文
sass&css 30天學習日誌30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言